🗄️ 브라우저 캐싱 전략 (Cache-Control 헤더)

정적 리소스를 재방문 시 네트워크 요청 없이 재사용하도록, 서버가 응답 헤더로 캐싱 정책을 지정할 수 있습니다.

1️⃣ 주요 Cache-Control 지시어

2️⃣ 실전 전략 - 파일명에 해시 붙이기

main.a1b2c3.js

Cache-Control: public, max-age=31536000, immutable

• 빌드 시 파일명에 콘텐츠 해시를 붙이면, 내용이 바뀌면 파일명도 바뀌기 때문에 캐시를 영구(1년)로 설정해도 안전
• HTML 파일 자체는 보통 no-cache로 설정해, 새 배포 시 최신 해시가 붙은 파일을 가리키도록 함

3️⃣ ETag를 이용한 유효성 재검증

ETag: "a1b2c3"

• no-cache로 설정된 리소스는 재요청 시 If-None-Match 헤더로 ETag를 보내고, 서버가 변경이 없으면 304 Not Modified로 응답해 본문 전송 없이 캐시를 재사용

✍️ 한 줄 정리

정적 리소스는 파일명 해시 + 영구 캐시로, HTML은 no-cache + ETag 재검증으로 조합하면 캐시 효율과 최신 배포 반영을 동시에 챙길 수 있다.